<template>
	<!-- 下拉刷新或滚动到底部时会自动触发@query方法。
	！！！注意！！！
	z-paging组件加载时也会触发(若要禁止，请设置:auto="false") -->
	<z-paging ref="paging" 
	:default-page-no="1"
	:default-page-size="12"
	v-model="imagesByCategory"
	@query="queryList">
	 
	 <!-- 自定义下拉刷新图标 -->
	 <template #refresher="{refresherStatus}">
		 <custom-refresher :status="refresherStatus"></custom-refresher>
	 </template>
	 
	 <!-- 图片分类的展示列表 -->
		<view class="container">
			<view class="content">
				<navigator :url="'/pages/preview/preview?id=' + item._id + '&categoryName=' + categoryName" 
				class="item" 
				v-for="item in imagesByCategory"
				 :key="item._id">
					<image :src="item.smallPicurl" mode="aspectFill">
						
					</image>
				</navigator>
			</view>
			
		</view>
			
			<!-- 自定义的没有更多数据view -->
			<template #loadingMoreNoMore>
				<uni-load-more status="noMore"></uni-load-more>
				<view class="safe-area-inset-bottom"></view>
			</template>
			
	</z-paging>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue';
	import { onLoad, onUnload, onReachBottom } from '@dcloudio/uni-app'
	import { apiGetImagesByCategory, apiGetUserDownloadOrScoreWallpapers } from '@/api/apis';
import { IMAGES_BY_CATEGORY_STORAGE } from '@/common/constants/storage';
import { gotoHome } from '@/utils/common';

	const queryParams = {
		classid: '',
		pageNum: 1,
		pageSize: 12,
		type: null, // 根据此字段查询 已下载壁纸 和 已评分壁纸
	}
	
	const pagingAuto = ref(false)
	
	// 页面名称
	let pageName 
	const categoryName = ref('图片分类')
	onLoad((params) => {
		// 对上一页面传递过来的参数进行解构，若属性为null或者undefined，给其默认值
		let {
			// classid = '6524a48f6523417a8a8b825d',
			classid = null,
			name = null, // 此参数是由 classify.vue 或 user.vue中传递过来的
			type = null // 此参数是由user.vue中传递过来的
		} = params
		
		if(!classid) classid = params.id
		
		if(name) {
			pageName = name
			categoryName.value = name
		}
		if(classid) queryParams.classid = classid
		if(type) queryParams.type = type
		
		// 若缺少参数classid 不再加载数据
		// if(!classid) {
		// 	gotoHome()
		// 	return
		// } 

		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: name
		})
	})
	
	
	// 页面销毁时，自动执行此函数
	onUnload(() => {
		// 清空本地缓存
		uni.removeStorageSync(IMAGES_BY_CATEGORY_STORAGE)
	})
	
	// 分享给好友
	onShareAppMessage(e => {
		return {
			title: '咸虾米壁纸-' + pageName,
			path: `pages/class-list/class-list?classid=${queryParams.classid}&name=${pageName}`
		}
	}) 
	
	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: '咸虾米壁纸-' + pageName,
			query: `classid=${queryParams.classid}&name=${pageName}`
		}
	}) 
	
	// 获取paging对象
	const paging = ref()
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const imagesByCategory = ref([])
	
	// 由于imagesByCategory是由z-paging组件进行更新的，故只能采用监听的方式
	// 及时的将数据放到缓存中
	watch(imagesByCategory, (newVal) => {
		// 将图片放入到缓存中，后续会通过修改后缀的方式获取图片大图
	  uni.setStorageSync(IMAGES_BY_CATEGORY_STORAGE, 
	  [...newVal]
	  )
	}, { deep: true })
	
	const getImagesByCategory = async (queryParams) => {
		const res = await apiGetImagesByCategory(queryParams)
		paging.value.complete(res.data)
	}
	
	const getUserDownloadOrScoreWallpapers = async (queryParams) => {
		const res = await apiGetUserDownloadOrScoreWallpapers(queryParams)
		paging.value.complete(res.data)
	}
	
	// 下拉刷新或滚动到底部时会自动触发此方法，
	// z-paging加载时也会触发(若要禁止，请设置:auto="false")
	const queryList = (pageNo=1, pageSize=12) => {
		queryParams.pageNum = pageNo
		queryParams.pageSize = pageSize
		if(queryParams.classid) {
			getImagesByCategory(queryParams)
		}
		if(queryParams.type) {
			getUserDownloadOrScoreWallpapers(queryParams)
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.container {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					// display: block;
				}
			}
		}
	}
</style>